import { useArray, useMount } from "../utils";

export const TsReactTest = () => {
    const persons: { name: string; age: number }[] = [
        { name: "jack", age: 12 },
        { name: "ma", age: 13 },
    ];
    const { value, clear, removeIndex, add } = useArray(persons);
    useMount(() => {
        // console.log(value.notExist)
        // add({name: 'david'})
        // removeIndex('123')
    });

    return (
        <div>
            {/* 点击以后增加john */}
            <button onClick={() => add({ name: "john", age: 18 })}>
                add john
            </button>
            {/* 点击后删除第一项 */}
            <button onClick={() => removeIndex(0)}>remove 0</button>
            {/* 点击后清空列表 */}
            <button style={{ marginBottom: "50px" }} onClick={() => clear()}>
                清除
            </button>
            {value.map(
                (person: { age: number; name: string }, index: number) => (
                    <div style={{ marginBottom: "30px" }} key={index}>
                        <span style={{ color: "red" }}>{index}</span>
                        <span>{person.name}</span>
                        <span>{person.age}</span>
                    </div>
                )
            )}
        </div>
    );
};
